<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>ixMarquee</title>
    <style>
        .xMarquee {
            border: 1px solid #ccc;
            height: 25px;
            width: 500px;
            margin: 50px auto;
            background: #ffffff;
        }

        .xMarquee ul {
            list-style-type: none;
            margin: 0px;
            padding: 0px;
            font-size: 12px;
            width: 1000000%;
        }

        .xMarquee ul li {
            float: left;
        }

        .xMarquee ul li a {
            color: #000;
            text-decoration: none;
            line-height: 25px;
        }

        .xMarquee ul li a:hover {
            text-decoration: underline;
        }
    </style>
</head>

<body>
<div id="x1" class="xMarquee">
    <ul>
        <li><a href="">&spades;1111111111111111 &nbsp;</a></li>
        <li><a href="">&spades;2222222222222 &nbsp;</a></li>
        <li><a href="">&spades;333333333333333 &nbsp;</a></li>
        <li><a href="">&spades;44444444444 &nbsp;</a></li>
        <li><a href="">&spades;555 &nbsp;</a></li>
        <li><a href="">&spades;6666666666666666666 &nbsp;</a></li>
    </ul>
</div>
<script src="jquery-3.1.1.min.js" type="text/javascript"></script>
<script src="ixMarquee.js" type="text/javascript"></script>
<script>
    $(function () {
        $("#x1").ixMarquee();
    });
</script>
</body>
</html>
